<template>
  <GoeliaWorldSkeleton v-if="isLoading" />
  <section class="goelia-world-section" v-if="!isLoading && galleryItems.length > 0">
    <div class="section-header">
      <h2 class="title">LUNRUO AROUND THE WORLD</h2>
      <p class="subtitle">#lunruolady | Follow us @lunruo_official</p>
    </div>

    <div class="gallery-container">
      <div class="gallery">
        <div v-for="(item, index) in galleryItems" :key="index" class="gallery-item">
          <div class="image-wrapper">
            <img :src="item.cover" :alt="item.title" class="gallery-image">
            <div class="overlay">
              <div class="shop-button" @click="handleClick(item)">
                SHOP THIS LOOK
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 产品弹框 -->
    <a-modal v-model:visible="modalVisible" :footer="null" :width="modalWidth" :centered="true" :closable="true"
      @cancel="closeModal" :destroyOnClose="true" class="product-modal">
      <div class="product-grid-container">
        <div class="product-grid">
          <div class="product-card-image">
            <img :src="selectedItem.cover" :alt="selectedItem.title">
          </div>
          <div class="product-card-info">
            <div v-for="(child, idx) in selectedItem?.shop_goods" :key="idx">
              <div class="img-wrapper">
                <img v-if="child.images.length > 0" :src="child.images[0]" :alt="child.name">
              </div>
              <h4 class="product-card-title" :title="child.name">{{ child.name }}</h4>
              <p class="product-card-price">{{ currencyStore.currentCurrency.unit }}{{
                proxy.$ConvertPrice(child.max_price) }}<span class="zk-price">{{ currencyStore.currentCurrency.unit }}
                  {{
                    proxy.$ConvertPrice(child.max_origin_price) }}</span></p>
              <a-button class="buy-now-btn">
                <a :href="`/product/${child.url}.html`" target="_blank">BUY NOW</a>
              </a-button>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </section>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { getLookList } from '@/api';
import { useCurrencyStore } from '@/store';
import GoeliaWorldSkeleton from './GoeliaWorldSkeleton.vue'; // Import the skeleton component

const router = useRouter();
const instance = getCurrentInstance();
const proxy = instance?.proxy; // Safely access proxy
const currencyStore = useCurrencyStore();

// isLoading state
const isLoading = ref(true);

// 定义画廊项数据结构
interface GalleryItem {
  cover: string;
  title: string;
  id: number;
  shop_goods?: ShopGood[];
  link?: string;
}

interface ShopGood {
  images: string[];
  name: string;
  max_price: number;
  max_origin_price?: number; // Add max_origin_price as optional
  url: string;
  link?: string;
}

// 弹框状态
const modalVisible = ref(false);
const selectedItem = ref<GalleryItem>({ cover: '', title: '', id: 0 }); // 初始化以匹配类型


// 根据窗口大小设置弹框宽度
const modalWidth = computed(() => {
  // 增大弹框宽度：移动端使用95%，桌面端使用更大的固定宽度
  return window.innerWidth < 768 ? '95%' : '1080px';
});

// 监听窗口大小变化
const handleResize = () => {
  // modalWidth会自动更新，不需要额外处理
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

// 画廊数据
const galleryItems = ref<GalleryItem[]>([
  // {
  //   image: 'https://cdn.covet.pics/postassets/18027219/standard_resolution/12ba33e6cfc78645c66d0301875250b1',
  //   caption: 'Elegant White Ensemble',
  //   link: '/products/white-outfit',
  //   price: 189
  // },
  // {
  //   image: '	https://cdn.covet.pics/postassets/18027218/standard_resolution/89ed844442fa051ce5ea980cce99beca',
  //   caption: 'Beige Trench Coat Set',
  //   link: '/products/beige-coat',
  //   price: 199
  // },
  // {
  //   image: 'https://cdn.covet.pics/postassets/18020004/standard_resolution/92034684852442d9801b40a25c9ad904',
  //   caption: 'Black Top with Beige Pants',
  //   link: '/products/black-top',
  //   price: 165
  // },
  // {
  //   image: 'https://cdn.covet.pics/postassets/18019789/standard_resolution/e894bf7315a18f155f7363c427945a6f',
  //   caption: 'Pink Lace Top',
  //   link: '/products/pink-lace',
  //   price: 120
  // },
  // {
  //   image: 'https://cdn.covet.pics/postassets/18020002/standard_resolution/af2ad9b349bc46dea350ca01839836f1',
  //   caption: 'White Casual Dress',
  //   link: '/products/white-dress',
  //   price: 189
  // },
  // {
  //   image: '	https://cdn.covet.pics/postassets/18019841/standard_resolution/62d6761608cb4980dcdf59cd819c927e',
  //   caption: 'Floral Pattern Dress',
  //   link: '/products/floral-dress',
  //   price: 178
  // },
  // {
  //   image: '	https://cdn.covet.pics/postassets/18019944/standard_resolution/1fc7f182c0dc9e686e9b43db27f364c6',
  //   caption: 'White Linen Set',
  //   link: '/products/white-linen',
  //   price: 210
  // },
  // {
  //   image: 'https://cdn.covet.pics/postassets/18019790/standard_resolution/67b5271eb97a47d7719867d01dc2704c',
  //   caption: 'Cream Knit Dress',
  //   link: '/products/cream-knit-dress',
  //   price: 189
  // },
  // {
  //   image: 'https://cdn.covet.pics/postassets/18019788/standard_resolution/25a7739640ba8d304cd7fa89db24a2b8',
  //   caption: 'White Lace Maxi Dress',
  //   link: '/products/white-lace-dress',
  //   price: 210
  // },
  // {
  //   image: 'https://cdn.covet.pics/postassets/18019780/standard_resolution/895435f7a8bca949e5c8dc9677990531',
  //   caption: 'White Embroidered Dress',
  //   link: '/products/white-embroidered-dress',
  //   price: 199
  // }
]);

// 获取穿搭列表
const getList = async () => {
  isLoading.value = true; // Set loading to true before fetching
  try {
    galleryItems.value = (window as any).__INITIAL_INDEX__.homeStyle
    // const res = await getLookList({
    //   page: 1,
    //   page_size: 100,
    //   type: '1' // 1-图片，2-视频
    // });
    // galleryItems.value = res.data.data;
  } catch (error) {
    console.error("Failed to fetch look list:", error);
    // Optionally, you could set galleryItems.value to an empty array or show an error message
  } finally {
    isLoading.value = false; // Set loading to false after fetching or error
  }
}

onMounted(() => {
  getList();
});

// 点击弹框
const handleClick = (item: GalleryItem) => {
  selectedItem.value = item;

  // 为当前选中项生成推荐商品列表
  // 这里可以根据实际需求改变逻辑，例如基于类别或标签匹配相关产品
  // 这里简单地合并当前选中产品和一些固定的附加产品
  // relatedProducts.value = [
  //   selectedItem.value,
  //   ...additionalProducts
  // ];

  selectedItem.value = item;
  modalVisible.value = true;
};

// 关闭弹框
const closeModal = () => {
  modalVisible.value = false;
};

// 购买按钮点击处理
const buyNow = (product: ShopGood) => { // 修改参数类型为ShopGood
  // 确保product.link存在，或者使用product.url构造链接
  const productLink = product.link || `/product/${product.url}.html`;
  window.open(productLink, '_blank');
};
</script>

<style scoped lang="scss">
.goelia-world-section {
  padding: 80px 0;
  background-color: #fff;
  padding-bottom: 0px;
}

.section-header {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 28px;
  font-weight: 600;
  color: #000;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.subtitle {
  font-size: 16px;
  color: #666;
  letter-spacing: 0.5px;
}

.gallery-container {
  // max-width: 1400px;
  margin: 0 auto;
  padding: 0 15px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;

  &:nth-child(3) {
    grid-column: span 1;
    grid-row: span 1;
  }

  &:nth-child(5) {
    grid-column: span 1;
    grid-row: span 1;
  }
}

.item-link {
  display: block;
  width: 100%;
  height: 100%;
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover .gallery-image {
  transform: scale(1.05);
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .overlay {
  opacity: 1;
}

.shop-button {
  // padding: 12px 20px;
  // background-color: rgba(255, 255, 255, 0.9);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  border-bottom: 1px solid #fff;
  transform: translateY(20px);
  transition: transform 0.4s ease, background-color 0.3s ease;
  border-radius: 0;
  cursor: pointer;
}

.gallery-item:hover .shop-button {
  transform: translateY(0);
}

// .shop-button:hover {
//   background-color: #fff;
// }

/* 产品弹框样式 */
:deep(.product-modal) {
  .ant-modal-content {
    border-radius: 0;
    padding: 0 !important;
    width: auto;
    max-width: 95vw;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .ant-modal-close {
    top: 0px;
    right: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;

    .ant-modal-close-x {
      font-size: 20px;
      color: #333;
    }
  }

  .ant-modal-body {
    padding: 0;
  }
}

:deep(.ant-modal .ant-modal-content) {
  padding: 0 !important;
}

/* 产品网格布局 */
.product-grid-container {
  background-color: white;
  // padding: 30px;
  margin-top: 30px;

  @media (max-width: 768px) {
    padding: 15px;
  }
}

.product-grid {
  display: flex;
  justify-content: space-around;

  @media (max-width: 768px) {
    flex-direction: column;
    /* 在移动端改为垂直布局 */
    align-items: center;
    /* 确保子元素居中 */
  }

  .product-card-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    width: 100%;
    /* 确保信息区域宽度正确 */
    text-align: center;

    @media (max-width: 576px) {
      grid-template-columns: repeat(1, 1fr);
      /* 在小屏幕上改为单列 */
      gap: 20px;
    }

    .img-wrapper {
      overflow: hidden;
      aspect-ratio: 3/4;
      max-width: 160px;
      margin: 0 auto;
      /* 在移动端居中显示 */

      @media (max-width: 576px) {
        max-width: 100%;
        /* 在小屏幕上图片占满父容器 */
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
      }

      &:hover img {
        transform: scale(1.05);
      }
    }

    /* 确保buy-now-btn在小屏幕下能够正常显示和居中 */
    .buy-now-btn {
      margin-top: 10px;

      /* 确保按钮和价格之间有间距 */
      @media (max-width: 576px) {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    }

    /* 确保标题和价格居中 */
    .product-card-title,
    .product-card-price {
      text-align: center;

      .zk-price {
        text-decoration: line-through;
        margin-left: 6px;
        color: #999;
        font-weight: normal;
        font-size: 90%;
      }
    }
  }
}

.product-card-image {
  min-width: 618px;
  aspect-ratio: 3/4.2;
  overflow: hidden;
  margin-right: 30px;

  @media (max-width: 768px) {
    min-width: unset;
    /* 移除最小宽度限制 */
    width: 100%;
    /* 撑满容器宽度 */
    max-width: 400px;
    /* 限制移动端最大图片宽度 */
    margin-right: 0;
    margin-bottom: 20px;
    /* 添加底部边距 */
    aspect-ratio: 1/1.25;
    /* 调整图片比例适合移动端 */
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  &:hover img {
    transform: scale(1.05);
  }
}

.product-card-title {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 6px;
  overflow: hidden;
  font-family: 'Source Sans Pro, sans-serif';
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
  color: rgba(96, 96, 96, 1);
  letter-spacing: 0.5px;
  max-width: 180px;
  /* 限制最大宽度 */
  margin-left: auto;
  /* 与右边距配合居中 */
  margin-right: auto;
  /* 与左边距配合居中 */
  padding-top: 10px;
  font-weight: 400;

  @media (max-width: 576px) {
    max-width: 100%;
    /* 在小屏幕上允许标题占满宽度 */
  }
}

.product-card-price {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #000;
}

/* 确保按钮在小屏幕下能够正常显示和居中 */
.buy-now-btn {
  background-color: #333;
  color: white;
  border: none;
  padding: 6px 20px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
  border-radius: 0;
  height: auto;
  line-height: 1.5;
  margin: 0 auto;

  &:hover {
    background-color: #000;
  }

  a {
    color: white;
    text-decoration: none;
  }

  @media (max-width: 576px) {
    padding: 8px 20px;
    /* 增大按钮内边距 */
    font-size: 14px;
    /* 增大字体大小 */
    width: fit-content;
    /* 让按钮宽度根据内容自适应 */
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 992px) {
  .goelia-world-section {
    padding: 60px 0;
  }

  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .goelia-world-section {
    padding: 40px 0;
  }

  .title {
    font-size: 24px;
  }

  .subtitle {
    font-size: 14px;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .goelia-world-section {
    padding: 30px 0;
  }

  .section-header {
    margin-bottom: 30px;
  }

  .title {
    font-size: 20px;
    margin-bottom: 5px;
  }

  .subtitle {
    font-size: 12px;
  }

  .gallery-container {
    padding: 0 10px;
  }

  .gallery {
    gap: 5px;
  }

  .shop-button {
    padding: 8px 15px;
    font-size: 12px;
  }

  /* 在移动端显示覆盖层，因为没有悬停状态 */
  .overlay {
    opacity: 0;
    /* 仍然默认隐藏 */
  }

  /* 为第一个项目显示覆盖层，作为示例 */
  .gallery-item:first-child .overlay {
    opacity: 1;
  }
}

/* 触摸设备支持 */
@media (hover: none) {
  .gallery-item:active .overlay {
    opacity: 1;
  }

  .gallery-item:active .shop-button {
    transform: translateY(0);
  }
}
</style>